<template>
	<view class="content">
		<view class="user">
			<image src="../../static/personal/bg.png" mode="widthFix" class="bg" />
			<view class="c">
				<view class="name">
					{{student.studentName}}
					<image src="../../static/personal/vip.png" mode="widthFix" />
				</view>
				<view class="data">
					<view class="item">
						<view class="num">{{signCount}}</view>
						<view class="text">已上课时</view>
					</view>
					<view class="item">
						<view class="num">{{student.residualClassHour}}</view>
						<view class="text">剩余课时</view>
					</view>
					<view class="item">
						<view class="num">{{dueTimeStr}}</view>
						<view class="text">剩余时间</view>
					</view>
				</view>
				<image class="avatar" src="../../static/personal/avatar.png"  @click="goPage()" mode="widthFix" />
			</view>
		</view>
		<view class="nav">
			<navigator :url="'/pages/my/info/info?bid='+bid" open-type="navigate" class="item" hover-class="none">
				<image src="../../static/personal/info.png" mode="widthFix" />
				<view class="text">我的信息</view>
			</navigator>
			<navigator url="/pages/appointment/list/list" class="item" hover-class="none">
				<image src="../../static/personal/coourse.png" mode="widthFix" />
				<view class="text">上课记录</view>
			</navigator>
			<navigator url="/pages/personal/news/news" open-type="navigate"  class="item" hover-class="none">
				<image src="../../static/personal/msg.png" mode="widthFix" />
				<view class="text">消息中心</view>
			</navigator>

			<navigator url="/pages/personal/contact/contact"  open-type="navigate"  class="item" hover-class="none">
				<image src="../../static/personal/phone.png" mode="widthFix" />
				<view class="text">联系我们</view>
			</navigator>
		</view>
		<view class="title">我的预约</view>
		<view class="dataList">
			<view class="item" v-for="item in appointmentList">
				<view class="name">
					{{item.studentName}}
					<view class="btn" @click="handleCancel(item.scdId)">取消</view>
				</view>
				<view class="text">
					<image src="../../static/personal/date.png" mode="widthFix"/>
					<view>{{item.courseTimeDesc}}{{item.startTime}}</view>
				</view>
				<view class="text">
					<image src="../../static/personal/address.png" mode="widthFix"/>
					<view>{{item.courseAddress}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import $util from '../../utils/util.js'
export default {
	data() {
		return {
			student : {},
			dueTimeStr: {},
			appointmentList: [],
			signCount: 0,
			bid: ''
		};
	},
	
	onLoad() {
		//console.log("11111111111111111111")
	},
	
	mounted(){
		this.bid = this.$util.getUrlCode("bid")
		this.getMy();
		this.getAppointmentList();
	},
	
	methods: {
		goPage(){
			uni.navigateTo({
				url: '/pages/my/info/info?bid='+ this.$util.getUrlCode("bid")
			}) 
		},
		getMy(){
			let userId = uni.getStorageSync('userId');
			if(!userId){
				uni.navigateTo({
					url: '/pages/my/login/login?bid='+ this.$util.getUrlCode("bid")
				}) 
			}
			uni.request({
				url: this.websiteUrl + 'app/my',
				data:{
					id: userId
				},
				success: (res) => {
					console.log(res)
					if (res.data.code == 0) {
						this.student = res.data.student;
						this.dueTimeStr = res.data.dueTimeStr;
						this.getSignCount(this.student.id);
					}
				}
			});
		},
		
		getSignCount(studentId){
			uni.request({
				url: this.websiteUrl + 'app/getSignCount',
				data:{
					studentId: studentId
				},
				success: (res) => {
					console.log(res)
					if (res.data.code == 0) {
						this.signCount = res.data.signCount;
					}
				}
			});
		},
		
		getAppointmentList() {
			let that = this
			let parent = uni.getStorageSync('parent');
			if(!parent){
				uni.navigateTo({
					url: '/pages/my/login/login'
				}) 
			}else{
				uni.request({
				    url: this.websiteUrl + 'app/haveappointment/studenthasappointment',
					method: 'POST',
				    data: {
				        status: 0, //查询已预约的
				        parentId: parent.id
				    },
				    success: function(res) {
						if(res.data.code == 0){
							that.appointmentList = res.data.page.list
							console.log(that.appointmentList);
						}else{
							that.$sys.showToast({
								title: res.data.msg
							});
						}
				    }
				});
			}
		},
		
		handleCancel(id) {
			let that = this
			uni.request({
				url: this.websiteUrl + 'app/haveappointment/cancelappointment?id=' + id,
				method: 'GET',
				data: {},
				success: function(res) {
					if (res.data.code == 0) {
						that.$sys.showToast({
							title: '取消成功！'
						});
						that.getAppointmentList()
					} else {
						that.$sys.showToast({
							title: res.data.msg
						});
					}
				}
			});
		},
	}
};
</script>

<style lang="scss">
.content {
	min-height: 100%;
	background: #f8f9f9;
}
.user {
	background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.21) 100%);
	margin: 0px -1 * $base-interval;
	padding: $base-interval $base-interval 0;
	position: relative;
	.c {
		position: absolute;
		left: 10%;
		top: 25%;
		width: 80%;
		height: 70%;
		z-index: 3;
		.name {
			font-size: $font-size-lg;
			color: $text-color-white;
			@extend .flex-space-between-center;
			justify-content: flex-start;
			image {
				width: 40rpx;
				margin-left: $sm-interval;
			}
		}
		.data {
			@extend .flex-space-between-center;
			padding-top: 80rpx;
			.item {
				text-align: center;
				color: $text-color-white;
				.num {
					font-size: $font-size-lg;
				}
				.text {
					margin-top: 10rpx;
					font-size: $font-size-sm;
				}
			}
		}
		.avatar {
			position: absolute;
			width: 130rpx;
			right: 0px;
			top: -10+-1 * $lg-interval;
		}
	}
}
.nav {
	@extend .flex-space-between-center;
	background: $bg-color-white;
	margin-top: $base-interval;
	border-radius: $border-radius-base;
	.item {
		width: 25%;
		text-align: center;
		padding: $base-interval 0px;
		image {
			margin: auto;
			width: 56rpx;
		}
		.text {
			color: $text-color-three;
			font-size: $font-size-sm;
			margin-top: $sm-interval;
		}
	}
}
.title {
	font-size: 36rpx;
	margin-top: 40rpx;
	margin-bottom: $base-interval;
}
.dataList {
	padding-bottom: 100rpx;
	.item {
		background-color: $bg-color-white;
		border-radius: $border-radius-base;
		padding: $base-interval;
		margin-bottom: $base-interval;
		box-shadow: 0px 0px 6px 2px rgba(186, 196, 207, 0.22);
		&:last-child {
			margin-bottom: 0px;
		}
		.name {
			@extend .flex-space-between-center;
			font-size: $font-size-lg;
			font-weight: 600;
			margin-bottom: 20rpx;
			position: relative;
		
			.btn {
				width: 98rpx;
				line-height: 48rpx;
				color: $text-color-white;
				background: #20c6ba;
				text-align: center;
				border-radius: 4rpx;
				font-size: $font-size-sm;
			}
		}
		.text {
			margin-top: 15rpx;
			@extend .flex-space-between-center;
			justify-content: flex-start;
			font-size: $font-size-sm;
			color: $text-color-nine;
			image{
				width: 28rpx;
				margin-right: $sm-interval;
			}
		}
	}
}
</style>
